<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<style>
    .form-control {
        margin: 10px;
    }

    #loginBox {
        width: 370px;
        height: 470px;
        border: 1px solid #E2E3E5;
        position: absolute;
        left: 50%;
        top: 40%;
        margin-left: -185px;
        margin-top: -200px;
        border-radius: 10px;
        /*background-color: #e0f7fa;*/
    }

    #logo {
        width: 370px;
        height: 95px;
        font-size: 30px;
        color: #676A6C;
        line-height: 95px;
        margin-left: 40px;
        float: left;
    }

    #user {
        width: 295px;
        height: 50px;
        margin-left: 40px;
    }

    #pass {
        width: 295px;
        height: 50px;
        margin-left: 40px;
    }

    #identity {
        width: 295px;
        height: 50px;
        margin-left: 40px;
    }


    #btn-login {
        width: 295px;
        height: 50px;
        margin-left: 40px;
        margin-top: 20px;
    }

    #remember {
        /*width: 80px;*/
        height: 20px;
        margin-left: 50px;
        margin-top: 20px;
        color: #676A6C;
        font-size: 15px;
        clear: both;
    }

    .toRegister {
        font-size: 12px;
        color: #676A6C;
        float: right;
        margin-right: 50px;

    }

    #code {
        width: 200px;
        height: 50px;
        margin-left: 40px;
        float: left;
    }

    #img {
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        height: 40px;
        width: 80px;
        margin-top: 19px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <script src="static/js/jquery.js"></script>
    <script src="static/bootstrap/js/bootstrap.js"></script>
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>

</head>
<body>

<div id="loginBox">
    <div id="logo">
        欢迎登录
        <span style="color: red">
            <c:if test="${sessionScope.login_msg!=null}">
                <c:out value="${sessionScope.login_msg}"/>
            </c:if>
        </span>
    </div>
    <form class="needs-validation" action="/LoginServlet" method="post">
        <div id="info">
            <input type="text" class="form-control" id="user" name="username" placeholder="账号" required>
            <input type="password" class="form-control" id="pass" name="password" placeholder="密码" required>

            <select class="selectpicker form-control" name="identity" id="identity" title="身份">
                <option value="user">普通用户</option>
                <option value="admin">管理员</option>
            </select>
            <input type="text" class="form-control" id="code" name="VCode" placeholder="请输入验证码" required>
            <img alt="点击更换验证码" src="<%= request.getContextPath() %>/VerifyCodeServlet" id="img" onclick="reloadImg()">


            <div id="remember">两周内自动登录 <input type="checkbox" name="autoLogin">
                <span class="toRegister">没有帐号？<a href="./register.jsp" id="toRegister">点此注册</a></span>
            </div>
            <button class="btn btn-primary" id="btn-login" οnclick="Login()">登录</button>
        </div>
    </form>
</div>


<script>
    function reloadImg() {
        console.log("刷新验证码")
        var time = new Date().getTime();
        document.getElementById("img").src = "<%= request.getContextPath()%>/VerifyCodeServlet?" + time;
    }


    toastr.options = { // toastr配置
        "closeButton": true, //是否显示关闭按钮
        "debug": false, //是否使用debug模式
        "progressBar": false, //是否显示进度条，当为false时候不显示；当为true时候，显示进度条，当进度条缩短到0时候，消息通知弹窗消失
        "positionClass": "toast-top-center",//显示的动画时间
        "showDuration": "400", //显示的动画时间
        "hideDuration": "2000", //消失的动画时间
        "timeOut": "1000", //展现时间
        "extendedTimeOut": "1000", //加长展示时间
        "showEasing": "swing", //显示时的动画缓冲方式
        "hideEasing": "linear", //消失时的动画缓冲方式
        "showMethod": "fadeIn", //显示时的动画方式
        "hideMethod": "fadeOut" //消失时的动画方式
    }

    //调用方式
    // toastr.error("连接不能打开！");
    // toastr.success("连接已建立，可以进行通信！")
    // toastr.success("连接已建立，可以进行通信！", "成功")
    // toastr.warning("连接建立失败，请重试！")
    // toastr.info("请先登录！")

</script>
</body>
</html>